<template>
  <div>
    <div class="header">
      <van-icon name="arrow-left" size="20" class="pad_10" @click="$router.go(-1)"/>
      <van-search
          shape="round"
          placeholder="请输入搜索关键词"
          class="flex_1"
          v-model.trim="keyword"
        />
      <van-button type="danger" size="small" class="mar_10 pad_10" @click="search">搜索</van-button>
    </div>
    <div class="mar_44" v-show="hist.length>0?true:false">
      <div class="title">
        <span>最近搜索</span>
        <span><van-icon name="delete" size="18" @click="delteHistory"/></span>
      </div>
      <div class="history" v-show="hist">
        <div class="note" v-for="item in hist" :key="item" @click="clickhis(item)">{{item}}</div>
      </div>
    </div>
    <div class="hotsearch mar_44">
      <div class="title">
        <span>热搜</span>
        <span @click="isshow=!isshow">隐藏</span>
      </div>
      <div class="history" v-show="isshow">
        <div class="note" v-for="item in hothistory" :key="item" @click="clickhis(item)">{{item}}</div>
      </div>
      <div class="discover" v-show="!isshow">
        已隐藏发现
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      keyword: '',
      hist: [],
      isshow: true,
      hothistory: ['无损播放器', '门铃感应器', '应急启动电源', '挂壁音响', '空气净化器', '移动书架', '加速器', '折叠床', '罗汉果茶']
    }
  },
  created () {
    this.hist = JSON.parse(localStorage.getItem('history')) || []
  },
  methods: {
    // 点击历史数据
    clickhis (keyword) {
      this.$router.push({
        path: '/searchlist',
        query: {
          keyword
        }
      })
      this.preserve(keyword)
    },
    // 删除历史数据
    delteHistory () {
      localStorage.setItem('history', null)
      this.hist = []
    },
    search () {
      if (this.keyword) {
        this.preserve(this.keyword)
        // 去商品列表
        this.$router.push({
          path: '/searchlist',
          query: {
            keyword: this.keyword
          }
        })
      } else {
        Toast('请输入搜索关键词')
      }
    },
    // 操作本地历史记录
    preserve (keyword) {
      let notes = JSON.parse(localStorage.getItem('history')) || []
      notes.unshift(keyword)
      notes = notes.slice(0, 6)
      notes = [...new Set(notes)]
      this.hist = notes
      localStorage.setItem('history', JSON.stringify(notes))
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  font-size: 16px;
  align-items: center;
  background-color: white;
  .pad_10{
    padding: 0 10px;
  }
  .mar_10{
    margin: 0 10px;
  }
  .flex_1{
    flex: 1;
  }
}
.mar_44{
  padding-top: 64px;
}
 .title{
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.history{
  font-size: 14px;
  text-align: left;
  padding: 0 30px;
  display: flex;
  flex-wrap: wrap;
  .note{
    padding: 5px 5px;
    margin: 5px;
    border-radius: 10px;
    background-color: #f0f2f5;

  }
}
.discover{
  padding-top: 20px;
  font-size: 16px;
  color: #666;
}
</style>
